<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/functions" prefix="f" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>我的积分</title>
		<!-- amazeui -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
		<!-- lib -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
		<!-- app -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/ui.css" />
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/integration.css"/>
		<style type="text/css">
			.jifen_zong{
				font-size: 20px;
    			color: #EB3D00;
			    position: absolute;
			    left: 75px;
			    top: 25px;
			}
			.ketixian{
				font-size: 12px;
			    color: #999999;
			    position: absolute;
			    left: 15px;
			    top: 60px;
			}
			.integta_num{
				left: 75px;
			}
			.shopjifen{
				font-size: 12px;
    			color: #999999;
			    position: absolute;
			    left: 172px;
			   	top: 60px;
			}
			.shopjifen_num{
				font-size: 12px;
    			color: #EB3D00;
			    position: absolute;
			    left: 239px;
			   	top: 54px;
			}
			header{
				width: 100%;
				position: fixed;
				top: 0;
				z-index: 10;
			}
			.logo_text{
				height: 40px;
				line-height: 40px;
				display: inline-block;
				color: #595b60;
				font-size: 16px;
				margin-left: 6px;
				float: left;
			}
			.nin{
				margin-top: 215px;
			}
		</style>
	</head>
	<body class="app-navbar-body">
			    <!-- 精品推荐 -->
	    <div class="app-part app-part-flow">
		    <header>
				<div class="header">
					<a href="${BASE_PATH}/my"><span class="back"></span></a>
					<a href="${BASE_PATH}/index"><span class="logo_pic"></span></a>
					<span class="logo_text">OK 妈咪</span>
					<!-- <span class="header_text">我的积分</span> -->
				</div>
				<div class="containers">
					<div class="con_header">
						<span class="integta">我的积分:</span>
						<span class="jifen_zong"> 商品积分：${sppoint }</span>
						<span class="jifen_zong"> 健康积分：${jkpoint }</span>
						<span class="jifen_zong"> 教育积分：${jypoint }</span>
						<span class="integta_text">购买积分商品时可以使用积分进行支付</span>
					</div>
				</div>
				<div class="nr_header">
					<span id="shouyi">交易记录</span>
				</div>
			</header>
			<div id="moneyList" class="am-g app-goods-list nin"></div>
	    </div>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
		<!-- app -->
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
	 
	 	<script type="text/html" id="dataTpl">
			{{each list as log }}
				<div class="goods_boxs am-u-md-4 am-u-lg-3 app-goods-item">
						<div class="shouyi_list">
							<div class="list_time">{{log.createDate}}</div>
							<div class="list_tital">{{log.describe}}</div>
								{{if log.orderType==1}}
										{{if log.type==1}}
											<div class="list_numa">已退款</div>
						  	 	 			<div class="list_num">+{{log.amount}}</div>
								 			<div class="list_numb"><span class="integta_btns" onclick="orderdeail('{{log.fromOrderNum}}')">查看</span></div>
										{{else if log.type==2}}
											<div class="list_numa">订单消费</div>
						  	 	 			<div class="list_num">-{{log.amount}}</div>
								 			<div class="list_numb"><span class="integta_btns" onclick="orderdeail('{{log.fromOrderNum}}')">查看</span></div>
										{{/if}}
								{{else if log.orderType==2}}
									<div class="list_numa">充值</div>
									<div class="list_num">+{{log.amount}}</div>
								{{/if}}
						</div>
				</div>
			{{/each}}
		</script>
		<script type="text/javascript">
	 	var loading = false ,pageNum = 0, totalPage = 1;
			//加载标识，表示当前是否有请求未完成，防止同时多个请求
			var loading = false;
			$(function(){
				//商品横向列表，判断数量越过个时才初始化滚动
				var swiperOption = {
					//默认每页显示3个
			        slidesPerView: 1,
			        //响应式配置
			        breakpoints: {
			        	2048: {slidesPerView: 7,spaceBetween: 40},
			        	1280: {slidesPerView: 6,spaceBetween: 40},
			            1024: {slidesPerView: 5,spaceBetween: 40},
			            768: {slidesPerView: 4,spaceBetween: 30},
			            640: {slidesPerView: 3,spaceBetween: 20},
			            319: {slidesPerView: 2,spaceBetween: 10}
			        }
			    };
				$(".app-swiper").each(function(index,swiper){
					if($(".app-goods-item",swiper).length>=3){
						$(swiper).attr("id","swiper"+index);
						//初始化swiper，并设置图片自动加载，需要img标签添加class="swiper-lazy"
						new Swiper("#swiper"+index, $.extend(swiperOption,{autoplay:2500+index*1500,lazyLoading:true}));
					}
				});
				//绑定“加载中”进入加载事件
				Kit.util.onPageEnd(function(){
	               	if(pageNum < totalPage && !loading){
	               		loading = true;
	               		$("#moneyList").append("<div class=\"app-loading\">正在加载</div>");
	               		Kit.ajax.post("${BASE_PATH}/my/moneyChange",{pageNum:pageNum+1,pageSize:10},function(result){
              				$("#moneyList").append(template("dataTpl",result.object));
              				//amazeui要求在最后一个元素上添加am-u-end样式，否则默认为右浮动
    						$(".app-goods-item","#messList").removeClass("am-u-end").last().addClass("am-u-end");
              				$(".app-loading","#moneyList").remove();
              				pageNum = result.object.pageNumber;
    						totalPage = result.object.totalPage;
    						//重置加载标识
							loading = false;
					});
	               	}
				});
				//用JS来计算屏幕宽度，然后设置“小惠通知”内容的宽度
				$(window).on("load",function(){
					var iconWidth = $("#app-tip-icon").width();
					var windowWidth = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
					$("#app-tip-content").css({"width": (windowWidth-iconWidth)+"px"});
					//初始化marquee
					$('#app-tip-content marquee').attr("width",windowWidth-iconWidth-10).marquee("pointer");
				});
			});
			function guize(){
				window.location.href="${BASE_PATH}/secondStage/guize";
			}
			function topoint(){
				window.location.href="${BASE_PATH}/my/topoint";
			}
			function orderdeail(num){
				window.location.href="${BASE_PATH}/order/detail/"+num;
			}
		</script>
	</body>
</html>
